<!--
  表具详情列表项：
  columnName 格式：
    [{
      key: 'meterId',
      name: '表具id'
    }, {
      key: 'unitId',
      name: '用户id'
    }]

  content 格式:
    {
      meterId: 1111,
      unitId: 2222
    }
-->

<template>
  <div class="meter-detail-item" :id="id" :key="id">
    <Row v-for="(column, index) of columnsList" :key="index">
      <i-col :span="24/column.length" v-for="item of column" :key="item.key">
        <Row v-if="column.length == 2">
          <i-col :title="item.name" :span="12">{{item.name}}:</i-col>
          <i-col :title="data[item.key] || '暂无'" :span="12" class="text">{{ data[item.key] || '暂无' }}</i-col>
        </Row>
        <Row v-else>
          <i-col :title="item.name" :span="6">{{item.name}}:</i-col>
          <i-col :title="data[item.key] || '暂无'" :span="18" class="text">{{ data[item.key] || '暂无' }}</i-col>
        </Row>
      </i-col>
    </Row>
  </div>
</template>
<script>
import { chunk } from 'lodash'
import { nanoid } from 'nanoid'

export default {
  name: 'detailItem',
  props: {
    id: {
      type: String,
      default: nanoid()
    },
    columnNames: Array,
    content: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    columnsList() {
      return this.columnNames.length > 0 ? chunk(this.columnNames, 2) : []
    },
    data() {
      return this.content ? this.content : {}
    }
  }
}
</script>
